<template>
  <div class="newProject">
    <div>
      <span>项目名称：</span
      ><el-input
        :style="{ width: '500px' }"
        v-model="projectMes.title"
        placeholder="请输入内容"
      ></el-input>
    </div>
    <div>
      <span>项目简介：</span
      ><el-input
        type="textarea"
        :rows="5"
        :style="{ width: '500px' }"
        placeholder="请输入内容"
        v-model="projectMes.synopsis"
      >
      </el-input>
    </div>
    <div>
      <span>项目周期：</span
      ><el-input-number
        v-model="projectMes.timeMin"
        :min="1"
        :max="10"
        label="描述文字"
      ></el-input-number>
      -
      <el-input-number
        v-model="projectMes.timeMax"
        :min="1"
        :max="10"
        label="描述文字"
      ></el-input-number
      >周
    </div>
    <div>
      <span>项目人数：</span
      ><el-input-number
        v-model="projectMes.peopleNumMin"
        :min="1"
        :max="10"
        label="描述文字"
      ></el-input-number>
      -
      <el-input-number
        v-model="projectMes.peopleNumMax"
        :min="1"
        :max="10"
        label="描述文字"
      ></el-input-number
      >人
    </div>
    <div>
      <span>项目难度：</span
      ><el-select v-model="projectMes.dif" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div>
      <span>项目要求：</span
      ><el-input
        type="textarea"
        :rows="5"
        :style="{ width: '500px' }"
        placeholder="请输入内容(每条中间用“//”隔开例如“要求一//要求二//...”)"
        v-model="projectMes.require"
      >
      </el-input>
    </div>
    <div>
      <el-button class="newBtn" type="primary" @click="newPro" round
        >发布项目</el-button
      >
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      projectMes: {
        title: "",
        synopsis: "",
        dif: "",
        require: "",
        peopleNumMin: 1,
        peopleNumMax: 1,
        timeMin: 1,
        timeMax: 1,
      },
      options: [
        {
          value: "简单",
          label: "简单",
        },
        {
          value: "中等",
          label: "中等",
        },
        {
          value: "困难",
          label: "困难",
        },
      ],
    };
  },
  methods: {
    newPro() {
      for (const key in this.projectMes) {
        if (this.projectMes[key] == "") {
          this.$message({
            message: "有未填项，请填写完整后再提交！",
            type: "warning",
          });
          return;
        } else {
          var token = localStorage.getItem("token");
          var t_id = token.substring(1, token.length - 1).split("#")[1] * 1;
          axios
            .post(`http://localhost:3000/teacher/addProject`, {
              t_id,
              projectMes: {
                  p_title:this.projectMes.title,
                  p_synopsis:this.projectMes.synopsis,
                  p_require:this.projectMes.require,
                  p_time:this.projectMes.timeMin+'-'+this.projectMes.timeMax+'周',
                  p_dif:this.projectMes.dif,
                  p_peopleNum:this.projectMes.peopleNumMin+'-'+this.projectMes.peopleNumMax+'人'
              },
            })
            .then((ret) => {
              if (ret.data.code == 1) {
                this.$message({
                  message: "发布成功！！",
                  type: "success",
                });
                this.$forceUpdate();
              }
            });
        }
      }
    },
  },
};
</script>

<style scoped>
.newProject {
  width: 85%;
  padding: 20px;
  margin: 20px auto;
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(5px);
  border-radius: 10px;
}
.newProject > div {
  width: 60%;
  padding: 15px 0;
  margin: 10px auto;
}
.newProject input {
  border: 0px;
  border-bottom: 2px solid #000;
  background-color: rgba(0, 0, 0, 0);
  width: 300px;
  height: 30px;
  padding-left: 10px;
  font: 18px/30px "";
}
.newProject span {
  vertical-align: top;
}
.newBtn {
  margin-top: 20px;
}
</style>
